<script setup lang="ts">
import { EQUIPMENT_COMPONENT_TYPE } from '@/enum'
import { Delete } from '@element-plus/icons-vue'
import { ElUpload } from 'element-plus'

defineOptions({
  name: 'ItemComponet',
})

const props = defineProps<{
  type: EQUIPMENT_COMPONENT_TYPE
  label: string
  prop: string
  required?: 0 | 1
  urlAddr?: string
  multipleAttachments?: 0 | 1
  isPicture?: boolean
  disabled?: boolean
}>()

const uploadRef = ref<InstanceType<typeof ElUpload>>()

const info = defineModel<Record<string, any>>('obj', { required: true })

const options = ref<{ key: string, value: string }[]>([])

async function httpRequest({ file }: any) {
  const { data } = await minioApi.upload(file)
  if (Array.isArray(info.value[`${props.prop}`])) {
    info.value[`${props.prop}`].push({
      fileUrl: data.url,
      fileName: data.urlName,
    })
  }
  else {
    info.value[`${props.prop}`] = [{
      fileUrl: data.url,
      fileName: data.urlName,
    }]
  }
}

async function handleRemove(file: any) {
  const index = info.value[`${props.prop}`].findIndex((item: any) => item.fileName === file.fileName)
  if (index > -1) {
    await minioApi.deleteFileById(file.fileName)
    info.value[`${props.prop}`].splice(index, 1)
    uploadRef.value?.clearFiles()
  }
}

onBeforeUnmount(() => {
  console.log('item-component unmounted')
})

onMounted(async () => {
  if (props.type === EQUIPMENT_COMPONENT_TYPE.SELECT && props.urlAddr) {
    const res = await equipmentInfoApi.getDynamicSelectOptions(props.urlAddr)
    options.value = res.data
  }
})
</script>

<template>
  <ElFormItem :label="label" :prop="prop" :required="!!required" :disabled="disabled">
    <template #error>
      <div class="fs-12 w-full text-rose">
        {{ label }}为必填项
      </div>
    </template>
    <ElRadioGroup v-if="type === EQUIPMENT_COMPONENT_TYPE.RADIO" v-model="info[prop]">
      <ElRadio label="是" value="1" />
      <ElRadio label="否" value="0" />
    </ElRadioGroup>
    <ElSelect v-else-if="type === EQUIPMENT_COMPONENT_TYPE.SELECT" v-model="info[prop]" :placeholder="`请选择${label}`">
      <ElOption v-for="item in options" :key="item.key" :label="item.value" :value="item.key" />
    </ElSelect>
    <ElDatePicker v-else-if="type === EQUIPMENT_COMPONENT_TYPE.DATE" v-model="info[prop]" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD" :placeholder="`请选择${label}`" />
    <ElUpload
      v-else-if="type === EQUIPMENT_COMPONENT_TYPE.ATTACHMENT"
      ref="uploadRef"
      :http-request="httpRequest"
      action="#" :multiple="!!multipleAttachments"
      :limit="multipleAttachments ? 10 : 1"
      :show-file-list="false"
    >
      <ElButton type="primary">
        上传文件
      </ElButton>
      <template v-if="info[prop] && info[prop].length > 0" #tip>
        <div class="w-full">
          <div v-for="item in info[prop]" :key="item.fileName" class="w-100 flex items-center py-3">
            <img v-if="isPicture" :src="item.fileUrl" class="h-20 w-20" object-fit="cover">
            <span v-else class="max-w-88 overflow-hidden text-ellipsis whitespace-nowrap">{{ item.fileName }}</span>
            <ElIcon v-if="!disabled" class="ml-auto cursor-pointer" color="#f56c6c" @click="handleRemove(item)">
              <Delete />
            </ElIcon>
          </div>
        </div>
      </template>
    </ElUpload>
    <ElInput v-else v-model="info[prop]" :placeholder="`请输入${label}`" />
  </ElFormItem>
</template>
